<script setup lang="ts">
import type { EvaluateRequestParams } from "@/types/Goods";
import { useVModel } from "@vueuse/core";

const props = defineProps<{ reqParams: EvaluateRequestParams }>();
const emit = defineEmits(["update:reqParams"]);

const reqParams = useVModel(props, "reqParams", emit);

function updateParams(target: Partial<EvaluateRequestParams>) {
  reqParams.value = {
    ...reqParams.value,
    ...target,
    page: 1,
  };
}
</script>
<template>
  <div class="sort">
    <span>排序：</span>
    <a
      href="javascript:"
      :class="{ active: reqParams.sortField === '' }"
      @click="updateParams({ sortField: '' })"
      >默认</a
    >
    <a
      href="javascript:"
      :class="{ active: reqParams.sortField === 'praiseCount' }"
      @click="updateParams({ sortField: 'praiseCount' })"
      >最新</a
    >
    <a
      href="javascript:"
      :class="{ active: reqParams.sortField === 'createTime' }"
      @click="updateParams({ sortField: 'createTime' })"
      >最热</a
    >
  </div>
</template>
<style scoped lang="less">
.sort {
  height: 60px;
  line-height: 60px;
  border-top: 1px solid #f5f5f5;
  border-bottom: 1px solid #f5f5f5;
  margin: 0 20px;
  color: #666;
  > span {
    margin-left: 20px;
  }
  > a {
    margin-left: 30px;
    &.active,
    &:hover {
      color: @xtxColor;
    }
  }
}
</style>
